<template>
  <div class="user-statics-container">
    <div class="statics-list">
      <div class="statics-item">
        <div class="statics-num">
          <p>{{ digitalBlockData.groupNum }}</p>
        </div>
        <div class="statics-title">
          <p>今日班组数量</p>
        </div>
      </div>
      <div class="statics-item register-person">
        <div class="statics-num">
          <p>{{ digitalBlockData.registerNum }}</p>
        </div>
        <div class="statics-title">
          <p>今日出勤人数</p>
        </div>
      </div>
      <div class="statics-item realtime-person">
        <div class="statics-num">
          <p>{{ digitalBlockData.realtimeNum }}</p>
        </div>
        <div class="statics-title">
          <p>实时在场人数</p>
        </div>
      </div>
    </div>
    <div class="register-person-echart">
      <div class="register-person-title">
        <h2>在册人员分布</h2>
        <div class="tab-list">
          <span :class="{ selected: activeTab === 'age' }"
                @click="toggleTab('age', '按年龄')"
                class="tab-item">按年龄</span>
          <span :class="{ selected: activeTab === 'area' }"
                @click="toggleTab('area', '按地区')"
                class="tab-item">按地区</span>
          <span :class="{ selected: activeTab === 'nation' }"
                @click="toggleTab('nation', '按民族')"
                class="tab-item">按民族</span>
        </div>
      </div>
      <div id="registerPersonalEchart"
           class="echart-container"></div>
    </div>
  </div>
</template>
<script>
import { standardCodeApi } from "@/services/StandardCode";
import moment from "moment";
import mockData from "./mock";
export default {
  data () {
    return {
      activeTab: "age",
      activeTabValue: "按年龄",
      project_id: "358",
      company_id: window.localStorage.getItem("comp_id") || "",
      yAxis: [],
      legend: [],
      xAxis: [],
      // 3个数字块数据
      digitalBlockData: {
        groupNum: 0,
        registerNum: 0,
        realtimeNum: 0
      },
      userInfo: {}
    };
  },
  props: {
    projectId: {}
  },
  watch: {
    projectId: {
      handler (newval) {
        if (newval !== "") {
          this.project_id = newval;
          this.getBlockData("jrbzszgroup001", "groupNum", 'companyId');
          this.getBlockData("dw-fgs-xm-jrlwrycq", "registerNum", 'noCompanyId');//出勤人数
          this.getBlockData("dw-fgs-xm-sszcrs", "realtimeNum", 'companyId');
          this.getPersonData();
        }
      },
      deep: true
    }
  },
  methods: {
    // 切换tab
    toggleTab (tab, value) {
      this.activeTab = tab;
      this.activeTabValue = value;
      this.getPersonData();
    },
    // 获取在场人员数据
    getPersonData () {
      standardCodeApi
        .onRegPersonPieChart({
          data: {
            index_no: 'registeredPersonnel',
            project_id: this.project_id,
            is_mock: 0,
            // company_id: this.company_id,
            dim2: this.activeTabValue || '',
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.total = 0;
            this.legend = [];
            this.yAxis = [];
            let list = res.data.list || [];
            if (list.length > 0) {
              list.map((item, ind, arr) => {
                this.legend.push(item.name);//标签
                this.yAxis.push({ name: item.name, value: item.count });//数据
                this.total = this.total + Number(item.count)
              });
              this.legend = this.legend.slice(0, 8);
              this.yAxis = this.yAxis.slice(0, 8)
            };

            this.init();
          }
        });
    },
    getParams (no, judgeIsCompId) {//获取传参
      let objV = {
        unit_no: no,
        max_num: 1,
        project_id: this.project_id,
        company_id: this.company_id
      };
      if (judgeIsCompId == 'noCompanyId') {//今日出勤人数不传company_id
        this.$delete(objV, 'company_id');
      };
      return objV;
    },
    // 图表初始化
    init () {
      let Chart = this.$echarts.init(
        document.getElementById("registerPersonalEchart")
      );
      // 绘制图表
      Chart.resize();
      this.options = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b}: {c} ({d}%)"
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          y: "center",
          right: "160px",
          textStyle: {
            color: "#000"
          },
          data: this.legend,
          formatter: item => {
            let findData = this.yAxis.find(v => {
              return v.name == item;
            });
            if (findData) {
              let percent = ((findData.value / this.total) * 100).toFixed(2);
              return `${item}  ${percent}%   ${findData.value}`;
            } else {
              return "";
            }
          }
        },
        color: [
          "#ffad0b",
          "#1890ff",
          "#5ad8a6",
          "#269a99",
          "#5d7092",
          "#bdefdb",
          "#9270ca",
          "#c2c8d5",
          "#fbe5a2",
          "#f6c3b7"
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "65%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: true,
            silent: false,
            label: {
              normal: {
                position: "center",
                formatter: this.total + "\n总人数",
                color: "#000",
                fontSize: 24
              },
              formatter: "{d}% "
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: this.yAxis
          }
        ],
        grid: {
          left: "0",
          top: "20",
          width: "130",
          height: "130"
        }
      };
      Chart.setOption(this.options);
      window.addEventListener("resize", function () {
        Chart.resize();
      });
    },
    // 获取数字块数据
    getBlockData (no, target, judgeIsCompId) {
      if (this.project_id === "") return;
      // 2020-05-13
      // 演示账号写死假数据
      if (this.userInfo.comp_id === "46") {
        this.digitalBlockData[target] = mockData[target];
      } else {
        if (no === 'dw-fgs-xm-sszcrs') {
          standardCodeApi.getIntimePeople({
            params: {
              project_ids: this.project_id
            }
          }).then(res => {
            if (res.code === 0) {
              this.digitalBlockData[target] = res.data.val;
            }
          })
        } else {
          standardCodeApi.getScreenBlockDataAPI({
            data: this.getParams(no, judgeIsCompId)
          })
            .then(res => {
              if (res.code === 0) {
                if (res.data.list.length > 0) {
                  this.digitalBlockData[target] = res.data.list[0].col_values[0];

                }
              }
            });
        }

      }
    }
  },
  created () { },
  mounted () {
    this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if (this.projectId) {
      this.project_id = this.projectId;
      this.getBlockData("jrbzszgroup001", "groupNum", 'companyId');
      this.getBlockData("dw-fgs-xm-jrlwrycq", "registerNum", 'noCompanyId');//出勤人数
      this.getBlockData("dw-fgs-xm-sszcrs", "realtimeNum", 'companyId');
      this.getPersonData();
    }
  }
};
</script>
<style scoped lang="scss">
.user-statics-container {
  .statics-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    padding: 20px 0;
    border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    .statics-item {
      width: 205px;
      height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
      &.register-person {
        .statics-num {
          background: rgba(230, 247, 255, 1);
          p {
            color: rgba(24, 144, 255, 1);
          }
        }
        .statics-title {
          background: rgba(186, 231, 255, 1);
        }
      }
      &.realtime-person {
        .statics-num {
          background: rgba(246, 255, 237, 1);
          p {
            color: rgba(82, 196, 26, 1);
          }
        }
        .statics-title {
          background: rgba(217, 247, 190, 1);
        }
      }
      .statics-num {
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 251, 230, 1);
        p {
          font-size: 28px;
          font-weight: bold;
          color: rgba(250, 173, 20, 1);
        }
      }
      .statics-title {
        width: 100%;
        height: 35px;
        background: rgba(255, 241, 184, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        p {
          font-size: 14px;
          color: #000;
        }
      }
    }
  }
  .register-person-echart {
    width: 100%;
    margin-top: 20px;
    .register-person-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        font-size: 16px;
        color: #000;
        font-weight: bold;
      }
      .tab-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tab-item {
          width: 60px;
          height: 24px;
          border-radius: 12px;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
          margin-right: 10px;
          color: #000;
          background: #fff;
          cursor: pointer;
          &.selected {
            color: #fff;
            background: #1890ff;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .echart-container {
      width: 100%;
      height: 400px;
    }
  }
}
</style>
